<template>
	<!-- 少多语言 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					<!-- {{i18n.p024}} -->
					{{i18n10.n034}}
				</view>
				<!-- <view @click="$tool.navTo('/pages/property/huazhuanjilu')" class="flex-1 text-alignR A-Medium record"
					:class="model=='light'?'recordLight':''">
					<view class="pr-3">
						{{i18n.p025}}
					</view>
				</view> -->
				<view class="flex-1 f0 pr-3 flex justify-end">
					<image @click="$tool.navTo('/pages/property/huazhuanjilu')" style="width: 56rpx;height: 56rpx;" :src="'/static/images/syjl_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view style="height: 24rpx;">

		</view>
		<!-- 币种 -->
		<view @click="$refs.czPoups.open()" class="topList py-4 mx-3 A-Medium flex align-center justify-between" :class="model=='light'?'topListLight':''">
			<view class="flex align-center">
				<view class="f0 mr-1">
					<image v-if="type==1" style="width: 40rpx;height: 40rpx;" src="/static/images/trade/17.png" mode=""></image>
					<image v-if="type==2" style="width: 40rpx;height: 40rpx;" src="/static/images/trade/18.png" mode=""></image>
					<image v-if="type==3" style="width: 40rpx;height: 40rpx;" src="/static/images/trade/19.png" mode=""></image>
				</view>
				<view class="title">
					{{coinType}}
				</view>
			</view>
			<view class="flex align-center">
				<view class="desc">
					{{i18n10.n005}}
				</view>
				<view class="f0">
					<image style="width: 40rpx;height: 40rpx;" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <view class="flex mx-3 align-center justify-between">
			<view class="topTitle A-Medium" :class="model=='light'?'topTitleLight':''">
				{{i18n.p026}}
			</view>
			<view class="record" :class="model=='light'?'topTitleLight':''">
				{{coinType}}
			</view>
		</view> -->
		<!-- 可用余额 -->
		<!-- <view class="topTitle mt-4 A-Medium ml-3" :class="model=='light'?'topTitleLight':''">
			{{i18n.p027}}
		</view> -->
		<!-- <view class="flex ml-3 record D-Bold align-end" style="margin-top: 24rpx;"
			:class="model=='light'?'recordLight':''">
			<view class="mr-1" style="font-size: 48rpx;font-weight: bold;">
				{{
						coinType=='USDT'?USDTMoney.a:
						coinType=='BTC'?BTCMoney.a:
						coinType=='ETH'?ETHMoney.a:''
					}}
			</view>
			<view class="mb-1">
				{{coinType}}
			</view>
		</view> -->
		<!-- 转出账户 -->
		<view class="formWrap mt-4 px-3 A-Regular">
			<view class="formTitle" :class="model=='light'?'formTitleLight':''">
				<!-- {{i18n.p028}} -->
				{{i18n10.n028}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" disabled v-model="email ? email : mobileNumber" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<!-- <view class="f0">
					<image style="width: 18rpx;height: 12rpx;" :src="'/static/images/downArrow_'+model+'.png'" mode="">
					</image>
				</view> -->
			</view>
		</view>
		<!-- 转入账户 -->
		<view class="formWrap mt-4 px-3 A-Regular">
			<view class="formTitle" :class="model=='light'?'formTitleLight':''">
				<!-- {{i18n.p028}} -->
				{{i18n10.n029}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="account" :placeholder="i18n10.n030" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<!-- <view class="f0">
					<image style="width: 18rpx;height: 12rpx;" :src="'/static/images/downArrow_'+model+'.png'" mode="">
					</image>
				</view> -->
			</view>
		</view>
		<view class="formWrap mt-4 px-3 A-Regular">
			<view class="formTitle" :class="model=='light'?'formTitleLight':''">
				<!-- {{i18n.p029}} -->
				{{i18n10.n031}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input v-model="transferAmount" type="text" :placeholder="i18n10.n032" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view class="flex align-center">
					<view class="formWrapB A-Medium" :class="model=='light'?'formWrapBLight':''">
						{{coinType}}
					</view>
					<view class="mx-2" style="width: 2rpx;height: 18rpx;background: #5951BA;">
						
					</view>
					<view @click="all" class="codeText">
						{{i18n.p030}}
					</view>
				</view>
			</view>
		</view>
		<view class="moneyDesc mt-2 mb-4 mx-3 flex A-Regular align-center justify-between" :class="model=='light'?'moneyDescLight':''">
			<view class="">
				{{i18n10.n150}}:{{
						coinType=='USDT'?USDTMoney.kh:
						coinType=='BTC'?BTCMoney.kh:
						coinType=='ETH'?ETHMoney.kh:''
					}} {{coinType}}
			</view>
			<view class="">
				<!-- {{i18n10.n027}} -->
				{{i18n10.n153}}:{{
						coinType=='USDT'?USDTMoney.a:
						coinType=='BTC'?BTCMoney.a:
						coinType=='ETH'?ETHMoney.a:''
					}} {{coinType}}
			</view>
		</view>
		<view class="formWrap mt-4 px-3 A-Regular">
			<view class="inputWrap px-3 flex align-center"
				:class="model=='light'?'inputWrapLight':''">
				<input v-model="password" type="password" :placeholder="i18n10.n016"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
			</view>
		</view>
		<view class="recordWrap A-Regular mx-3 py-4 px-3" style="margin-top: 5rpx;"
			:class="model=='light'?'recordWrapLight':''">
			<view class="text4" :style="model=='light'?'color: #cc0003;':'color: #cc0003;'">
				{{i18n.p033}}
			</view>
			<view class="text5 my-2">
				<!-- 1、{{i18n.p034}}<br> 2、{{i18n.p035}} -->
				{{i18n10.n033}}
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="" style="position: fixed;bottom: 0;width: 100%;padding-top: 24rpx;height: 180rpx;background: #0E0F11;" :style="model=='light'?'background:#fff':''">
			<view @click="submit" class="btn mx-auto A-Medium clickCss">
				<!-- {{i18n.p032}} -->
				{{i18n10.n034}}
			</view>
		</view>
		<view class="" style="height: 210rpx;">
		
		</view>
		
		<view class="" style="height: 30rpx;">

		</view>
		<czPoup ref="czPoups" :type="2" @confirm="czConfirm"></czPoup>
	</view>
</template>

<script>
	import {
		transferAdd
	} from '@/core/api/index.js';
	import {
		checkCapitalPassword
	} from '@/core/api/user.js';
	import czPoup from '@/components/czPoup.vue';
	export default {
		components: {
			czPoup
		},
		data() {
			return {
				coinType:'',
				remark:'',
				transferAmount:'',
				account:'',
				password:'',
				money:123,
				isSubmit:false,
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.coinType = "USDT";
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			// 用户余额
			this.$store.dispatch('config/getAassetList');
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		computed: {
			i18n() {
				return this.$t('property');
			},
			i18n2() {
				return this.$t('showToast');
			},
			i18n4() {
				return this.$t('last');
			},
			i18n10() {
				return this.$t('newObj');
			},
			model() {
				return this.$store.state.config.model;
				// return 'dark';
			},
			USDTMoney(){
				return this.$store.state.config.USDTMoney
			},
			BTCMoney(){
				return this.$store.state.config.BTCMoney
			},
			ETHMoney(){
				return this.$store.state.config.ETHMoney
			},
			capitalPassword() {
				return this.$store.state.config.capitalPassword
			},
			mobileNumber() {
				return uni.getStorageSync('mobileNumber');
			},
			email() {
				return uni.getStorageSync('email');
			},
			passportAuthStatus() {
				return this.$store.state.config.passportAuthStatus;
			},
		},
		methods:{
			validateAmount(value, decimals = 6) {
			    // 空值校验
				if (!value) return false;
				
				// 转为字符串处理
				const strValue = value.toString();
				
				// 金额格式正则
				// ^[1-9]\d*$ 匹配大于0的整数
				// ^0$ 匹配0
				// ^[1-9]\d*\.\d{1,2}$ 匹配小数(小数位数可通过decimals参数控制)
				// ^0\.\d{1,2}$ 匹配以0开头的小数
				const regExp = new RegExp(`^(([1-9]\\d*)|0)(\\.\\d{1,${decimals}})?$`);
				
				return regExp.test(strValue);
			},
			submit(){
				let kh = this.coinType=='USDT'?this.USDTMoney.kh:
						this.coinType=='BTC'?this.BTCMoney.kh:
						this.coinType=='ETH'?this.ETHMoney.kh:'';
				if(kh<this.transferAmount){
					this.$tool.showToast(this.i18n10.n152);
					return;
				}
				if(this.account == this.mobileNumber || this.account == this.email){
					this.$tool.showToast(this.i18n4.l051);
					return;
				}
				if (this.passportAuthStatus != 3) {
					// 未提交
					this.$tool.showToast(this.i18n4.l015);
					return;
				}
				if (!this.capitalPassword) {
					let obj = {
						type: 2,
						verifyType: '',
						mobileNumber: '',
						email: '',
					}
					obj.mobileNumber = this.mobileNumber;
					obj.email = this.email;
					this.$tool.navTo(this.$tool.handleUrl('/pages/mine/testVerify', obj));
					return;
				}
				if(this.account==='') return this.$tool.showToast(this.i18n10.n030);
				if(this.transferAmount==='') return this.$tool.showToast(this.i18n10.n032);
				if(!this.validateAmount(this.transferAmount)){
					return this.$tool.showToast(this.i18n10.n155);
				}
				// if(this.remark==='') return this.$tool.showToast(this.i18n2.st025);
				if (this.password === '') return this.$tool.showToast(this.i18n10.n016);
				this.$tool.showLoading();
				if(this.isSubmit){
					return;
				}else{
					this.isSubmit = true;
				}
				checkCapitalPassword({
					capitalPassword:this.password,
					mobileUserId:uni.getStorageSync('mobileUserId')
				}).then(ress=>{
					let data = {
						mobileUserId: uni.getStorageSync('mobileUserId'),
						coinType: this.coinType,
						remark: this.remark,
						transferAmount: this.transferAmount
					};
					if(this.account.indexOf('@')==-1){
						data.transferMobileNumber = this.account;
					}else{
						data.transferEmail = this.account;
					}
					
					transferAdd(data).then(res=>{
						uni.hideLoading();
						this.$tool.showToast(this.i18n2.st036);
						this.$store.dispatch('config/getAassetList');
						setTimeout(res=>{
							this.$tool.goBack();
						},800)
					}).catch(res=>{
						this.isSubmit = false;
						uni.hideLoading();
					})
				}).catch(err=>{
					this.isSubmit = false;
					uni.hideLoading();
				})
			},
			all(){
				
				this.transferAmount = this.coinType=='USDT'?this.USDTMoney.a:
				this.coinType=='BTC'?this.BTCMoney.a:
				this.coinType=='ETH'?this.ETHMoney.a:''
			},
			czConfirm(item) {
				console.log(item,'cs');
				this.type = item.id;
				this.coinType = item.value;
				this.transferAmount = '';
			},
		}
	}
</script>

<style scoped lang="scss">
	.moneyDesc {
		font-size: 24rpx;
		color: #7F838D;
	}
	.moneyDescLight {
		font-size: 24rpx;
		color: #0E0F11;
	}
	.topList {
		border-bottom: 2rpx solid #2D2D2E;
		.title {
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.desc {
			font-size: 28rpx;
			color: #7F838D;
		}
	}
	.topListLight {
		border-bottom: 2rpx solid #F4F4F4;
		.title {
			color: #0E0F11;
		}
	}
	.record {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordLight {
		color: #0E0F11;
	}

	.topTitle {
		font-size: 28rpx;
		color: #7F838D;
	}

	.topTitleLight {
		color: #0E0F11;
	}

	.formWrap {
		.formTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin-bottom: 22rpx;
		}
		.formTitleLight {
			// color: #7F838D;
			color: #0E0F11;
		}
		.formWrapB {
			font-size: 28rpx;
			color: #E9EAED;
		}
		.formWrapBLight {
			color: #0E0F11;
		}
		.inputWrap {
			width: 690rpx;
			height: 88rpx;
			background: #16181C;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 35rpx;

			.area {
				font-size: 28rpx;
				color: #AAACB8;
			}

			.areaLight {
				color: #7F838D;
			}

			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				// text-align: right;
			}

			.inputTextLight {
				color: #0E0F11;
			}

			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}

			.placeholderClassLight {
				color: #B5B7BF;
			}

			.img1 {
				width: 15rpx;
				height: 11rpx;
				margin-left: 16rpx;
				margin-right: 42rpx;
			}

			.img2 {
				width: 40rpx;
				height: 40rpx;
			}

			.codeText {
				font-size: 28rpx;
				color: #5951BA;
			}
		}

		.inputWrapLight {
			background: #FFFFFF;
		}

		.forgetPass {
			font-size: 28rpx;
			color: #5951BA;
		}
	}

	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordWrap {
		margin-top: 104rpx;

		.text1 {
			font-size: 24rpx;
			color: #7F838D;
			margin-top: 44rpx;
			margin-bottom: 46rpx;
		}

		.text2 {
			font-size: 22rpx;
			color: #7F838D;
			margin-top: 42rpx;
			margin-bottom: 32rpx;
		}

		.text3 {
			font-size: 24rpx;
			color: #AAACB8;
		}

		.text4 {
			font-size: 24rpx;
			// color: #F7F7F7;
			color: #B5B7BF;
		}

		.text5 {
			font-size: 20rpx;
			// color: #EBAC00;
			color: #7F838D;
		}

		.text6 {
			font-size: 22rpx;
			color: #7F838D;
		}
	}

	.recordWrapLight {}
</style>